<template>
    <div class="home-banner">
        <el-carousel height="500px" type="card" width="800px" :interval="2600">
            <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                <img :src="item.imageUrl" style="cursor: pointer" @click="toDetail(item.id)" />
            </el-carousel-item>
        </el-carousel>
    </div>
</template>


<script>
import { getProductList } from '@/api/product';

export default {
    name: 'Banner',

    data() {
        return {
            bannerList: [],
            baseUrl: null
        };
    },
    created() {
        this.getData();
    },

    methods: {
        getData() {
            //是否推荐,isBanner=2
            getProductList({ isBanner: 2 }).then((res) => {
                this.bannerList = res.data.list;
            });
        },

        toDetail(id) {
            this.$router.push({
                path: '/detail',
                query: { id: id }
            });
        }
    }
};
</script>

<style scoped lang='scss'>
    .home-banner {
        // width:60%;
        // height: 8.9125rem;
        position: relative;
        overflow: hidden;
        margin: 100px auto;
        width: 1500px;
        height:450px;
        // background-color: red
        
        // position: absolute;
        // left: 200px;
        /*background-color: red;*/
        /*top: 0;*/
        // z-index: 98;
        // margin-top: 0.15625rem;

        img {
            width: 100%;
            height: 100%;
            height: 6rem;
        }
    }
</style>
